<template>
  <div class="table-land-view" :style="{height:height}">
       <vxe-table
         border
         :show-header="false"
         height="auto"
         :data="tableData">
         <vxe-column>
           <template #default="{row}">
             <div style="display: flex;padding:10px; " 
                  :class="{'selected':row.farmLandId == dropFarmLandId}">
                   <div class="imgBox" >
                            <div class="image-view">      
                                <Image
                                    :list="[`${urlImage}/lngis/farm/common/static/${row.picSource}`]"
                                    :url="`${urlImage}/lngis/farm/common/static/${row.pic}`"  />
                                 </div>
                               <div class="tips-icon">{{row.farmLandNo}}</div>
                               <div class="time-text" v-if="row.bozhongTime">{{formatDate(row.bozhongTime)}}播种</div>
                       </div>
                       <div class="right-view" @click="setMapData(row)">
                         <div class="title">
                               <span class="name" :title="row.farmLandName">{{row.farmLandName}}</span>
                           </div>
 
                            <div class="tag-view">
                               <div class="tag-text">
                                 <span v-if="row.cropSeriesName"> {{ row.cropName }},{{ row.cropSeriesName}}</span>
                                 <span v-else> 暂无作物</span>
                               </div>
                               <div class="size">
                                   {{Number(row.mapAreaSize.toFixed(2))}}亩
                               </div>
                           </div>
                           <div class="tag-view-padding">
                               <div class="tag-text-tag" v-if="row.tagsName">
                                 <span v-for="item in row.tagsName.split(',')">{{ item }}</span>
                               </div>
                               <div class="tag-text-tag" v-else>
                                 <span>暂无标签</span>
                               </div>
                           </div>
                           <vxe-button 
                             v-if="showDelete" 
                             type="text" 
                            @click="btnDel(row)" 
                            class="btn-delete" 
                            status="danger" 
                           icon="vxe-icon-delete"></vxe-button>
                       </div>
             </div>
                    
           </template>
         </vxe-column>
       </vxe-table>
       <vxe-pager 
           v-model:current-page="pageInfo.page" 
           :layouts="['PrevPage','FullJump','PageCount','NextPage']"
           @page-change="pageChangeEvent"
           v-model:page-size="pageInfo.limit" 
           :total="pageInfo.total" />
     </div>
</template>

<script setup>
import {ref} from "vue"
import Image from '@/components/custom/image.vue'
import { formatDate } from '@/utils/format'
const urlImage = ref(import.meta.env.VITE_BASE_PATH)
const emit = defineEmits(['page-change','onClick','onDelete'])
const props = defineProps({
   tableData:{
       type:Array,
       default:[]
   },
   pageInfo:{
       type:Object,
       default:{}
   },
   showDelete:{
       type:Boolean,
       default:false
   },
   height:{
     type:String,
     default:'calc(100vh - 380px)'
   }
})
const dropFarmLandId = ref('')
const pageChangeEvent = ({currentPage, pageSize}) => {
   emit('page-change',{currentPage, pageSize})

}
 // 表格行单击处理事件
const setMapData= (row)=>{
   dropFarmLandId.value = row.farmLandId
   emit('onClick',row)
}

 const btnDel= (row)=>{
   emit('onDelete',row)
}

</script>
<style>
.table-land-view .vxe-body--column{
      padding:0 !important;
   }
   .table-land-view .vxe-table--render-default .vxe-cell{
     padding:0;
   }
   .table-land-view .vxe-pager .vxe-pager--wrapper{
     margin:0 auto;
     flex-grow: 0;
   }
</style>
<style lang="scss" scoped>
.table-land-view{
   height: calc(100vh - 380px);
   padding:0 10px;
   margin-top:-1px;
   .imgBox{
         position: relative;
         width: 92px;
         height: 78px;
         background-size: cover;
         background-repeat: no-repeat;
         background-position: left top;
         border-radius: 3px;
         flex-shrink: 0;
         background-color: #f4f4f4;
         .image-view{
           width: 92px; 
           height: 78px;
           position: relative;
         }
         .tips-icon{
             position: absolute;
             left: 0;
             top: 0;
             width: 60px;
             height: 30px;
             background: url();
             background-repeat: no-repeat;
             background-position: inherit;
             display: flex;
             justify-content: left;
             font-size: 12px;
             padding:1px 2px;
             color: #fff;
         }
         .time-text{
          font-size:10px;
          position: absolute;
          bottom: 0;
          left:4px;
          font-weight: bold;
         }
     }
     .right-view{
       padding-left:10px;
       cursor: pointer;
     }
     .title{
         display: flex;
         font-size: 14px;
         overflow: hidden;
         width:150px;
         .name{
             flex: 1;
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
             word-break: break-all;
             font-weight: 500;
             flex-shrink: 0;
             width: 0;
             font-size:15px;
             color: #333;
             font-weight: bold;
         }
         .iocnbtn{
             display: flex;
             align-items: center;
             flex-shrink: 0;
         }
       }
         .tipsbox{
             display: flex;
             span{
                 background: #FFF5E5;
                 border-radius: 2px;
                 height: 26px;
                 padding: 0 8px;
                 font-size:14px;
             }
         }
         .tag-view-padding,
         .tag-view{
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding-top:6px;
             padding-right: 2px;
             padding-bottom:6px;
             .tag-text{
                 span{
                   font-size: 12px;
                   background-color: #ff9c00;
                   padding:4px 6px;
                   border-radius:16px;
                   margin-right:4px;
                   color: #fff;
                 }
             }
             .tag-text-tag{
                 span{
                   font-size: 12px;
                   padding:4px 6px;
                   margin-right:4px;
                   color: #333;
                 }
             }
             .size{
                     font-weight: 400;
                     color: #999999;
                     font-size:14px;
                 }
         }
         .tag-view-padding{
          padding-top:0;
          padding-bottom: 0;
         }
         .btn-delete{
           position: absolute;
           right:5px;
           bottom:8px;
           z-index:99;
           font-size:15px;
         }
     .selected{
           background-color: #EBF9F4; 
           &::before{
               content: '';
               position: absolute;
               left: 0;
               top: 0;
               width: 4px;
               height: 100%;
               background-color: #04AE70;
               z-index:9;
           }
       }
 }
</style>